<template>
	<div class="container">
		<div>
			<div>
				<el-input v-model="MenuName" style="width: 240px" placeholder="请输入菜单名">
					<template #append>
						<el-button :icon="Search" @click="cha()" />
					</template>
				</el-input>
			</div>

			<el-table :data="tableData" :border="true" style="width: 100%">
                <el-table-column prop="Id" label="Id" width="80"/>
                <el-table-column prop="ProjectName" label="项目名称"/>
                <el-table-column prop="ProcedureName" label="工序名称"/>
                <el-table-column prop="EmployeeName" label="负责人"/>
                <el-table-column prop="Desc" label="原因"/>
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button @click="showApproval(scope.row.Id)" type="primary" size="small"
                            plain>审批</el-button>
                    </template>
                </el-table-column>
			</el-table>
			<div class="demo-pagination-block">
				<el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize"
					:page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
					layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
			<!-- <el-dialog v-model="detailVisible">
				<Detail :id="Id" />
			</el-dialog>-->
			<el-dialog v-model="approvalVisible">
				<Approval :id="Id" @onSave="closeApproval"/>
			</el-dialog> 
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { ref, onMounted } from 'vue';
	import { type ComponentSize } from 'element-plus'
	import { Search } from '@element-plus/icons-vue'
	import transferinfoapi from '../../api/transferinfoapi';
    import Approval from './Approval.vue';

	const Id = ref(0);
	const MenuName = ref("")
	const tableData = ref([]);
	const total = ref(0);
	const pageSize = ref(10);
	const pageIndex = ref(1);

	const size = ref<ComponentSize>('default')
	const background = ref(false)
	const disabled = ref(false)

	enum statusText {
		"正常" = 1,
		"删除" = 0,
		"异常" = -1
	}


	const getdata = (MenuName: string = "", PageSize: number = 10, PageIndex: number = 1) => {
		var query = {
			MenuName: MenuName,
			PageSize: PageSize,
			PageIndex: PageIndex
		}
		transferinfoapi.getApproval(query).then((res: any) => {
			tableData.value = res.data
			total.value = res.total;
		}).catch((err: any) => {
			console.log("err=>", err);
		})
	}

	const cha = () => {
		getdata(MenuName.value);
	}

	// 详细
	const detailVisible = ref(false);
	const showDetail = (id: number) => {
		Id.value = id;
		detailVisible.value = !detailVisible.value;
	}

	// 审批
	const approvalVisible = ref(false);
	const showApproval = (id: number) => {
		Id.value = id;
		approvalVisible.value = !approvalVisible.value
	}
	const closeApproval = ()=>{
		approvalVisible.value = !approvalVisible.value
		getdata(MenuName.value, pageSize.value, pageIndex.value);
	}




	const handleSizeChange = (val: number) => {
		console.log(`${val} items per page`)
		pageSize.value = val;
		pageIndex.value = 1;
		getdata(MenuName.value, pageSize.value, pageIndex.value);
	}
	const handleCurrentChange = (val: number) => {
		console.log(`current page: ${val}`)
		pageIndex.value = val;
		getdata(MenuName.value, pageSize.value, pageIndex.value);
	}

	onMounted(() => {
		getdata(MenuName.value, pageSize.value, pageIndex.value);
	})

</script>
<style scoped>
	.container{
		height: 100%;
	}
	.container>div {
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 1rem 0;
	}

	.container>div>:nth-child(2) {
		flex-grow: 1;
	}
</style>